<template>
	<z-paging ref="paging" v-model="list" @query="getList" empty-view-text="暂无数据"
		:empty-view-img-style="{width:'150rpx',height:'150rpx'}" :empty-view-title-style="{marginTop: '30rpx'}">
		<template #refresher="{refresherStatus}">
			<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
			<custom-refresher :status="refresherStatus" />
		</template>
		<view class="pad-left-right-24">
			<!-- <view class="bg-white radius20 centerY pad-top-30">
				<up-tag color="#0099DE" text="编号：0001" plain shape="circle"></up-tag>
				<view class="mar-left-20">
					<up-tag color="#0099DE" text="2025" plain shape="circle"></up-tag>
				</view>
			</view> -->

			<view class="table font-28" v-if="list.length > 0">
				<view class="row centerY th">
					<view class="td width4">水表编号</view>
					<view class="td width4">缴费方式</view>
					<view class="td width5">金额</view>
					<view class="td width5">支付</view>
					<view class="td width1">时间</view>

				</view>
				<view v-for="item in list" :key="item.id" class="row centerY color-646464">
					<view class="td width4">
						<text v-if="item.order_type == 1">{{item?.water_meter_info?.code}}</text>
						<text v-else-if="item.order_type == 2">/</text>
					</view>
					<view class="td width4">
						<text v-if="item.order_type == 1">水表充值</text>
						<text v-else-if="item.order_type == 2">其他订单</text>
					</view>
					<view class="td width5">{{item.amount}}</view>
					<view class="td width5">
						<view v-if="item.pay_status == 1">
							<view>未支付</view>
							<view @click="debounce(hanldePay(item),500)" class="button-style">支付</view>
						</view>
						<text v-else-if="item.pay_status == 2">支付中</text>
						<text v-else-if="item.pay_status == 3">已支付</text>
						<text v-else-if="item.pay_status == 4 || item.pay_status == 5">取消支付</text>
					</view>
					<view class="td width1">{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { orderList, payUnify } from '@/api/user.js';
	import { timeFormat } from '@/node_modules/uview-plus';
	import { debounce } from '@/node_modules/uview-plus';

	const list = ref([]);
	const paging = ref(null);

	// 获取列表数据
	const getList = (page, pageSize) => {
		orderList({
			page,
			ps: pageSize
		}).then(res => {
			if (res?.code == 200) {
				paging.value.complete(res.data.data);
			} else {
				paging.value.complete(false);
			}
		})
	}

	// 创建订单
	const hanldePay = (row) => {
		payUnify({
			order_no: row.order_no,
			pay_plat: 30,
			openid: uni.getStorageSync('wxInfo').openid
		}).then(pay => {
			// #ifdef MP-WEIXIN
			let upay = pay.data.pay_data;
			let orderInfo = {
				package: upay.package, // 固定值
				nonceStr: upay.nonceStr, // 随机字符串
				timeStamp: upay.timeStamp, // 时间戳（单位：秒）
				signType: "RSA",
				paySign: upay.paySign, // 签名，这里用的 MD5 签名
			}

			uni.requestPayment({
				provider: "wxpay", //固定值为"wxpay"
				...orderInfo,
				success: function(res) {
					hanldeCancel();
				},
				fail: function(err) {
					console.log('支付失败:' + JSON.stringify(err));
				}
			});
			// #endif 
		})
	}
</script>

<style scoped>
	.button-style {
		width: 100rpx;
		padding: 5rpx 0;
		box-sizing: border-box;
		text-align: center;
		margin-top: 5px;
	}

	.table {
		width: 100%;
		margin-top: 50rpx;
		display: table;
		border-left: 1rpx solid #D5D5D5;
		border-top: 1rpx solid #D5D5D5;
	}

	.row {
		display: table-row;
	}

	.td {
		display: table-cell;
		padding: 10rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #D5D5D5;
		border-bottom: 1rpx solid #D5D5D5;
		vertical-align: middle;
	}

	.th {
		background: #F2FAFD;
	}

	.width1 {
		width: 120rpx;
	}


	.width4 {
		width: 140rpx;
	}

	.width5 {
		width: 100rpx;
	}

	.input-box {
		width: 400rpx;
	}
</style>